<template>
  <div>
    <div class="left-top">
      <div class="imgBox">
        <img :src="Img">
        <p> 您好:{{name}}</p>
      </div>
    </div>
    <div class="scroll-box">
      <el-menu class="el-menu-vertical-demo" router
               default-active="/"
               background-color="#173452"
               active-text-color="#ffd84d"
               text-color="white"
               :collapse="isCollapse"
               unique-opened
               style="padding-left: 24px;"
      >

        <el-submenu   :index="item.resId+''"  v-for="(item,index) in menmu" :key="index">
          <template slot="title">
            <i :class="item.menuIcon"></i>
            <span> {{ item.resName }}</span>

          </template>
          <el-menu-item-group style="padding-left: 40px">
            <el-menu-item :index="items.resUrl" @click="changCount"  v-for="(items,index) in (menmu[index].childs)" :key="index">{{items.resName}}</el-menu-item>
          </el-menu-item-group>


        </el-submenu>




      </el-menu>

    </div>
  </div>
</template>

<script>
import { mapMutations,mapState } from 'vuex'

export default {
  name: "Mymennu",
  data() {
    return {
      menmu:[],
      Img:'',
      name:'',
      isCollapse: false,
      scroll: null,
      isShow: false,
    }
  },
  computed:{
    ...mapState(['loginData'])
  },
  methods: {
    ...mapMutations(['changeNumber']),
    changCount() {
      this.changeNumber()
    },

    //从本地加载菜单数据
    getMennu(){
      const loginDataAll=JSON.parse(localStorage.getItem('loginDataAll'))
          this.menmu=loginDataAll

    },
    getName(){
      const name = localStorage.getItem('user')
      this.name=name
      if (  this.name==='123'){
        this.Img=require('../../assets/images/login/5.jpg')
      }else {
        this.Img=require('../../assets/images/login/小女孩.png')
      }




    }
  },
  created() {
    this.getName()
    this.getMennu()
  }

}
</script>

<style lang="less" scoped>
.left-top {

  height: 170px;
  text-align: center;

  .imgBox {

    color: white;
    margin-top: 30px;
    margin-left: 12px;

    img {

      width: 120px;
      height: 120px;
      border-radius: 60px;
    }

  }

}

.scroll-box {
  overflow-y: scroll;
  height: 620px;

}

.wrapper {

}

.scroll-box::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: #b5b1b1
}

.scroll-box::-webkit-scrollbar {
  display: none;
}

.el-menu-item [class^=el-icon-] {
  margin-right: 40px;
}

.el-submenu [class^=el-icon-] {
  margin-right: 40px;
}

.element.style {
  padding-left: 73px;
}

</style>